<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="format-detection" content="telephone=no"/>
    <meta name="msapplication-tap-highlight" content="no"/>
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"/>
    <link rel="stylesheet" href="<%- rootUrl %>/res/adapter.css" />
    <link rel="stylesheet" href="<%- rootUrl %>/node_modules/font-awesome/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/common.css" />
    <title>我的订单 - 我爱零吃网</title>
    <style>
        #fix-top {
            position: fixed;
            width: 100%;
            height: 48px;
            background: #fb7;
            top: 0;
            z-index: 100;
        }
        .nav-news-active { color:#fed;border-bottom:6px solid #fed;border-top:6px solid transparent }
        #nav-news {font-weight:bold;height:100%;text-align:center}
        #nav-news > a:hover {color:white}
        #nav-news > a {padding:7px 0}
        .board-row2.hbox > img:first-child {padding:0}
    </style>
    <script src="<%- rootUrl %>/node_modules/jquery/dist/jquery.min.js"></script>
    <script src="<%- rootUrl %>/res/adapter.js"></script>
</head>
<body class="body-nomargin">
<div id="fix-top">
    <div id="nav-news" class="width-limit hbox align-items-center justify-content-center childs-flex-grow padding-leftright">
        <a href="javascript:;" class="nav-news-active">最近订单</a>
        <a href="javascript:;">全部订单</a>
    </div>
</div>
<div class="width-limit" style="text-align: center;margin-top:48px">
    <div class="board" style="margin-top:10px;text-align:left">
        <div class="childs-vert-middle">
            <div class="ico16" style="background-image: url(icon/shop16.png)"></div><span style="margin-left:6px">好吃的网店</span>
            <div class="unimportant"  style="float:right">2018.10.29&nbsp;09:33&nbsp;~&nbsp;(未签收)&nbsp;[已置顶]</div>
        </div>
        <div class="board-row2 hbox childs-padding-arround-6 align-items-center">
            <img class="ico64" src="img/goods01.jpg"/>
            <div class="adapt-panel childs-padding-arround-6" style="flex-grow:1">
                <div>三只松鼠坚果大礼包</div>
                <div class="unimportant">订单号: 2018102970869381</div>
            </div>
            <div style="flex-shrink:0">1件</div>
            <div style="flex-shrink:1" class="adapt-panel align-items-center justify-content-center"><div class="unimportant">交易金额</div><div>￥45.50</div></div>
        </div>
        <div class="board-row2 hbox childs-flex-grow" style="text-align:center">
            <a href="javascript:;"><div style="color:red">签收</div></a>
            <a href="javascript:;"><div>查看物流</div></a>
            <a href="javascript:;"><div >退货</div></a>
            <a href="javascript:;"><div class="unable">评价</div></a>
        </div>
    </div>
    <div class="board" style="text-align: left">
        <div class="childs-vert-middle">
            <div class="ico16" style="background-image: url(icon/shop16.png)"></div><span style="margin-left:6px">好吃的网店</span>
            <div class="unimportant"  style="float:right">2018.10.28&nbsp;09:30&nbsp;~&nbsp;2018.10.29&nbsp;09:33</div>
        </div>
        <div class="board-row2 hbox childs-padding-arround-6 align-items-center">
            <img class="ico64" src="img/goods01.jpg"/>
            <div class="adapt-panel childs-padding-arround-6" style="flex-grow:1">
                <div>喜之郎美好时光海苔(大包)</div>
                <div class="unimportant">订单号: 2018102970869382</div>
            </div>
            <div style="flex-shrink:0">1件</div>
            <div style="flex-shrink:1" class="adapt-panel align-items-center justify-content-center"><div class="unimportant">交易金额</div><div>￥13.00</div></div>
        </div>
        <div class="board-row2 hbox childs-flex-grow" style="text-align:center">
            <a href="javascript:;"><div style="color:limegreen">✔已签收</div></a>
            <a href="javascript:;"><div>查看物流</div></a>
            <a href="javascript:;"><div >退货</div></a>
            <a href="javascript:;"><div>评价</div></a>
        </div>
    </div>
    <div class="board" style="text-align:left">
        <div class="childs-vert-middle">
            <div class="ico16" style="background-image: url(icon/shop16.png)"></div><span style="margin-left:6px">好吃的网店</span>
            <div class="unimportant"  style="float:right">2018.10.28&nbsp;09:30&nbsp;~&nbsp;2018.10.29&nbsp;09:33</div>
        </div>
        <div class="board-row2 hbox childs-padding-arround-6 align-items-center">
            <img class="ico64" src="img/goods01.jpg"/>
            <div class="adapt-panel childs-padding-arround-6" style="flex-grow:1">
                <div>百果园蔬果大拼盘</div>
                <div class="unimportant">订单号: 2018102970869383</div>
            </div>
            <div style="flex-shrink:0">1件</div>
            <div style="flex-shrink:1" class="adapt-panel align-items-center justify-content-center"><div class="unimportant">交易金额</div><div>￥70.00</div></div>
        </div>
        <div class="board-row2 hbox childs-flex-grow" style="text-align:center">
            <a href="javascript:;"><div style="color:limegreen">✔已签收</div></a>
            <a href="javascript:;"><div>查看物流</div></a>
            <a href="javascript:;"><div class="unable">退货已超期</div></a>
            <a href="javascript:;"><div>追加评价</div></a>
        </div>
    </div>
</div>
<%- components['navfoot'] ? include(components['navfoot'], this) : '' %>
<style>
#nav-foot > div > a {padding:0 9px}
</style>
<script>
document.querySelector('#nav-foot > div').innerHTML =
'<a href="index.html" class="adapt-panel" ><i class="fa fa-home fa-2x"></i><div>返回首页</div></a>'+
'<a href="order.html" class="adapt-panel"><i class="fa fa-calendar-check-o fa-2x"></i><div>我的订单</div></a>'+
'<a href="javascript:;" class="adapt-panel"><i class="fa fa-phone-square fa-2x"></i><div>客服中心</div></a>'+
'<a href="javascript:;" class="adapt-panel"><i class="fa fa-truck fa-2x"></i><div>退货方法</div></a>';
</script>
<script>
var nav_news = $("#nav-news");
var nav_news_childs = nav_news.children("a");
nav_news_childs.click(function(){
    nav_news_childs.removeClass("nav-news-active");
    $(this).addClass("nav-news-active");
});
</script>
</body>
</html>